<template>
  <div>
    <div :class="{ 'theme-setting-box': true }">
      <a-radio-group
        v-model="value"
        class="color-selector theme-setting"
        :disabled="disabled"
        :default-value="props.default"
        @change="onChange($event)"
      >
        <a-radio-button
          v-for="(option, index) in props.options.filter(
            (item) => item.type === props.optionType
          )"
          :key="index"
          :value="index"
          :style="props.optionStyle.wrapper"
        >
          <!-- <div v-for="(color,index) in option.value.slice(0, 8)" :key="index" class="theme-color-div"
              :style="{'background-color': color}"/> -->
          <a-popover
            v-if="props.name === 'colors' && option.name === '其他'"
            class="popover-item"
            title="更多颜色"
            trigger="click"
            placement="topRight"
          >
            <template slot="content">
              <theme-color-radio
                :props="option.props"
                :disabled="disabled"
                :clicked="themeColorRadioClicked"
                @change="
                  (val) => {
                    colorChange(val)
                  }
                "
              >
              </theme-color-radio>
            </template>
            <div class="theme-item">
              <div
                class="icon-box"
                :class="{
                  'icon-box-checked':
                    value === -1 ? index === props.default : index === value,
                }"
                :style="props.optionStyle.item"
              >
                <img
                  class="icon"
                  alt=""
                  :style="props.optionStyle.icon"
                  :src="publicPath + option.imgSrc"
                />
              </div>
              <div class="label">{{ option.name }}</div>
            </div>
          </a-popover>
          <div v-else class="theme-item">
            <div
              class="icon-box"
              :class="{
                'icon-box-checked':
                  value === -1 ? index === props.default : index === value,
              }"
              :style="props.optionStyle.item"
            >
              <img
                class="icon"
                alt=""
                :style="props.optionStyle.icon"
                :src="publicPath + option.imgSrc"
              />
            </div>
            <div class="label">{{ option.name }}</div>
          </div>
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<script lang="ts">
import { Prop, Vue, Component, Watch } from 'vue-property-decorator'
// import VisualizationStore from '@/store/modules/visualization'
import ThemeColorRadio from '@/components/controlSetter/material/ThemeColorRadio.vue'
import { publicPath } from '@/api/constants'

@Component({
  components: {
    ThemeColorRadio,
  },
})
export default class IconRadio extends Vue {
  @Prop() props: any
  public value: number = -1
  public themeColorRadioClicked: boolean = false
  public checkInit: boolean = false
  private publicPath = publicPath

  @Prop({
    type: Boolean,
    default() {
      return false
    },
  })
  disabled!: boolean

  @Watch('props', { immediate: true })
  init() {
    // if (
    //   this.props.configType !== 'dataView' &&
    //   VisualizationStore.currentGridItem
    // ) {
    //   this.props.target =
    //     VisualizationStore.currentGridItem.chartOptions[this.props.name]
    // }
    if (this.props.target !== undefined || this.props.target !== null) {
      if (this.props.name !== 'colors') {
        this.value = this.props.options.findIndex((item: any) => {
          return item.value === this.props.target
        })
      } else {
        const string1 = this.props.target.toString()
        this.value = this.props.options.findIndex((item: any) => {
          const string2 = item.value.toString()
          return string1 === string2
        })

        if (this.value === -1) {
          const propsfind: number = this.props.options[2].props.options.findIndex(
            (item: any) => {
              const string2 = item.value.toString()
              return string1 === string2
            }
          )

          // 其他颜色中找到了选定颜色
          if (propsfind !== -1) {
            this.value = 2
            this.props.options[2].props.default = propsfind
            this.themeColorRadioClicked = true
          }
        }
      }
    }
  }

  public onChange(event: any) {
    if (this.props.name !== 'colors' || this.value !== 2) {
      if (this.props.name === 'colors') {
        this.themeColorRadioClicked = false
      }

      this.value = event.target.value
      const currentValue = this.props.options[this.value].value
      // const chartOptions = VisualizationStore.currentGridItem?.chartOptions
      // const chartType = VisualizationStore.currentGridItem?.chartType[1]
      // if( this.props.name === 'yAxisScaleType' && chartType !== undefined && ['barChart', 'groupBarChart', 'stackBarChart'].includes(chartType)
      //   && chartOptions && chartOptions.axisCategoricalDataSelection === 'yAxis') {
      //   this.$emit('update-form-data', currentValue, 'xAxisScaleType')
      //   this.$emit('change', currentValue)
      // } else {
      //   this.$emit('update-form-data', currentValue, this.props.name)
      //   this.$emit('change', currentValue)
      // }
      this.$emit('update-form-data', currentValue, this.props.name)
      this.$emit('change', currentValue)
    }
  }

  public colorChange(value: any) {
    this.themeColorRadioClicked = true
    this.value = 2 // 其他index为2
    this.$emit('update-form-data', value, this.props.name)
    this.$emit('change', value)
  }
}
</script>

<style lang="less" scoped>
.theme-setting-box {
  padding-left: 12px;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
  border-color: none;
  box-shadow: none;
  color: none;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
  border-color: rgba(255, 255, 255, 0);
  box-shadow: none;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
  outline: 0 solid rgba(255, 255, 255, 0);
}

.ant-radio-button-wrapper {
  background: rgba(255, 255, 255, 0);
  border: 0 solid rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 #888;
  display: inline-flex;
  padding: 0;
  position: static;

  .icon-box {
    border: 1px solid #f0f1fc;
    border-radius: 2px;

    &:hover {
      border: 1px solid #a1a7fb;
    }
  }

  .icon-box-checked {
    border: 1px solid #a1a7fb;
  }
}

.ant-radio-button-wrapper-checked {
  border: 0 solid rgba(255, 255, 255, 0);
  box-shadow: none;

  &:hover {
    border-color: rgba(255, 255, 255, 0);
    box-shadow: none;
  }
}

.theme-setting {
  display: flex;
  text-align: left;

  .theme-item {
    display: inline-block;
    margin-right: 14px;
    width: auto;

    .icon-box {
      .icon {
        border: 1px solid #eff0fe;
        position: relative;
      }
    }

    .label {
      color: #5d637e;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 1.12px;
      line-height: 17px;
      margin-top: 6px;
      text-align: center;
      width: 100%;
    }
  }
}
</style>
<style>
.ant-popover {
  width: 190px;
}

.ant-popover-title {
  color: #5d637e;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.12px;
  padding-bottom: 7.5px;
  padding-top: 7.5px;
}
</style>
